<template>
	<div class="mpvue-picker">
		<div :class="{'pickerMask':showPicker}" @click="maskClick" catchtouchmove="true"></div>
		<div class="mpvue-picker-content " :class="{'mpvue-picker-view-show':showPicker}">
			<div class="mpvue-picker__hd" catchtouchmove="true">
				<div class="mpvue-picker__action" @click="pickerCancel">取消</div>
				<div class="mpvue-picker__action" :style="{color:themeColor}" @click="pickerConfirm">确定</div>
			</div>
			<picker-view indicator-style="height: 40px;" class="mpvue-picker-view" :value="pickerValue" @change="pickerChange">
				<block>
					<picker-view-column>
						<div class="picker-item" v-for="(item,index) in provinceDataList" :key="index">{{item.label}}</div>
					</picker-view-column>
					<picker-view-column>
						<div class="picker-item" v-for="(item,index) in cityDataList" :key="index">{{item.label}}</div>
					</picker-view-column>
					<picker-view-column>
						<div class="picker-item" v-for="(item,index) in areaDataList" :key="index">{{item.label}}</div>
					</picker-view-column>
				</block>
			</picker-view>
		</div>
	</div>
</template>

<script>
import { area } from '@/mixins'
export default {
	data() {
		return {
			pickerValue: [0, 0, 0],
			provinceDataList: [],
			cityDataList: [],
			areaDataList: [],
			/* 是否显示控件 */
			showPicker: false
		}
	},
	mixins: [area],
	created() {
		this.init()
	},
	props: {
		/* 默认值 */
		pickerValueDefault: {
			type: Array,
			default() {
				return [0, 0, 0]
			}
		},
		/* 主题色 */
		themeColor: String
	},
	watch: {
		pickerValueDefault() {
			this.init()
		}
	},
	methods: {
		init() {
			this.handPickValueDefault() // 对 pickerValueDefault 做兼容处理

			const pickerValueDefault = this.pickerValueDefault
			this.provinceDataList = this.provinceData
			this.cityDataList = this.cityData[pickerValueDefault[0]]
			this.areaDataList = this.areaData[pickerValueDefault[0]][pickerValueDefault[1]]
			this.pickerValue = pickerValueDefault
		},
		show() {
			setTimeout(() => {
				this.showPicker = true
			}, 0)
		},
		maskClick() {
			this.pickerCancel()
			this.$parent.mottoshow = true
		},
		pickerCancel() {
			this.showPicker = false
			this._$emit('onCancel')
			this.$parent.mottoshow = true
		},
		pickerConfirm(e) {
			this.showPicker = false
			this._$emit('onConfirm')
		},
		showPickerView() {
			this.showPicker = true
		},
		handPickValueDefault() {
			const pickerValueDefault = this.pickerValueDefault

			let provinceIndex = pickerValueDefault[0]
			let cityIndex = pickerValueDefault[1]
			const areaIndex = pickerValueDefault[2]
			if (
				provinceIndex !== 0 ||
					cityIndex !== 0 ||
					areaIndex !== 0
			) {
				if (provinceIndex > this.provinceData.length - 1) {
					this.pickerValueDefault[0] = provinceIndex = this.provinceData.length - 1
				}
				if (cityIndex > this.cityData[provinceIndex].length - 1) {
					this.pickerValueDefault[1] = cityIndex = this.cityData[provinceIndex].length - 1
				}
				if (areaIndex > this.areaData[provinceIndex][cityIndex].length - 1) {
					this.pickerValueDefault[2] = this.areaData[provinceIndex][cityIndex].length - 1
				}
			}
		},
		pickerChange(e) {
			let changePickerValue = e.mp.detail.value
			if (this.pickerValue[0] !== changePickerValue[0]) {
				// 第一级发生滚动
				this.cityDataList = this.cityData[changePickerValue[0]]
				this.areaDataList = this.areaData[changePickerValue[0]][0]
				changePickerValue[1] = 0
				changePickerValue[2] = 0
			} else if (this.pickerValue[1] !== changePickerValue[1]) {
				// 第二级滚动
				this.areaDataList =
						this.areaData[changePickerValue[0]][changePickerValue[1]]
				changePickerValue[2] = 0
			}
			this.pickerValue = changePickerValue
			this._$emit('onChange')
		},
		_$emit(emitName) {
			let pickObj = {
				label: this._getLabel(),
				value: this.pickerValue,
				code: this._getCode()
			}
			this.$emit(emitName, pickObj)
		},
		_getLabel() {
			let pcikerLabel =
					this.provinceDataList[this.pickerValue[0]].label +
					'-' +
					this.cityDataList[this.pickerValue[1]].label +
					'-' +
					this.areaDataList[this.pickerValue[2]].label
			return pcikerLabel
		},
		_getCode() {
			const province = this.provinceDataList[this.pickerValue[0]].value
			const city = this.cityDataList[this.pickerValue[1]].value
			const district = this.areaDataList[this.pickerValue[2]].value
			return [province, city, district]
		}

	}
}
</script>

<style scoped>
	.pickerMask {
		position: fixed;
		z-index: 1000;
		top: 0;
		right: 0;
		left: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 0.6);
	}

	.mpvue-picker-content {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		transition: all 0.3s ease;
		transform: translateY(100%);
		z-index: 3000;
	}

	.mpvue-picker-view-show {
		transform: translateY(0);
	}

	.mpvue-picker__hd {
		display: flex;
		padding: 20px 15px;
		background-color: #fff;
		position: relative;
		text-align: center;
		font-size: 17px;
	}

	.mpvue-picker__hd:after {
		content: ' ';
		position: absolute;
		left: 0;
		bottom: 0;
		right: 0;
		height: 1px;
		border-bottom: 1px solid #e5e5e5;
		color: #e5e5e5;
		transform-origin: 0 100%;
		transform: scaleY(0.5);
	}

	.mpvue-picker__action {
		display: block;
		flex: 1;
		color: #1aad19;
		font-size: 30px;
	}

	.mpvue-picker__action:first-child {
		text-align: left;
		color: #888;
	}

	.mpvue-picker__action:last-child {
		text-align: right;
	}
	.picker-item {
		text-align: center;
		line-height: 73px;
		text-overflow: ellipsis;
		white-space: nowrap;
		font-size: 30px;
	}

	.mpvue-picker-view {
		position: relative;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 450px;
		background-color: rgba(255, 255, 255, 1);
	}
</style>
